<template>
<h1>属性绑定指令</h1>
  <input type="text" value="uname">
<!--  属性绑定：将HTML的属性绑定给某个响应式变量，由响应式变量来控制该属性的值-->
  <input type="text" v-bind:value="uname">
<!--  简写形式-->
  <input type="text" :value="uname">
  <hr>
  <a href="url">超链接1</a>  |
  <a :href="url" :title="title">超链接2</a>

</template>

<script setup>
import { ref } from 'vue';

const uname = ref('rose');

const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com';

//新增一个响应式变量title值为‘7月正在热销中！’
//修改第二个<a>标签，显示title的内容作为a标签的悬停提示
const title = ref('7月正在热销中！');
</script>

<style scoped>

</style>